<script setup lang="ts">
import { loginWithPassword } from '@/api/user'
import Layout from '@/components/Form/Layout.vue'
import XInput from '@/components/Form/XInput.vue'
import XButton from '@/components/Form/XButton.vue'
import XPasswordInput from '@/components/Form/XPasswordInput.vue'

const formData = $ref({
	account: '', //账号
	password: '', //密码
	accept: false //是否同意协议
})

const { base, success } = useToast()
const { switchLoginState } = $(useUser())

const login = async () => {
	const { code, msg, data } = await loginWithPassword({
		phone: formData.account,
		password: formData.password
	})
	if (code !== 0) {
		base(msg || '登录失败！')
	} else {
		success(msg || '登录成功！')
		switchLoginState(data)
	}
}

</script>

<template>
	<Layout v-model="formData.accept" title="密码登录" :show-wechat="true">
		<view mt-10>
			<XInput v-model="formData.account" placeholder="请输入手机号" />
		</view>
		<view mt-10>
			<XPasswordInput v-model="formData.password" />
		</view>
		<view my-5>
			<XButton :form-data="formData" @click="login">
				立即登录
			</XButton>
		</view>
		<view between>
			<navigator url="/pages/login/captcha" hover-class="text-blue transition" text="30 #555555">
				忘记密码
			</navigator>
			<navigator text="30 #555555" url="/pages/register/index" hover-class="text-blue transition">
				去注册
			</navigator>
		</view>
	</Layout>
</template>



<style lang="scss" scoped></style>
